<script setup lang="ts">
import { ref, computed, watch, defineProps } from 'vue';
import { LocateSetData } from '@/utils/appCommon/appCommonOptions/aeLocateConfigModel';

// 导入2D和3D组件
import SphereFace2d from './sphereFace2d.vue';
import SphereFace3d from './sphereFace3d.vue';

// 定义接收的props
const props = defineProps<{
  locateSetting: LocateSetData;
  renderParams: {
    width: number;
    height: number;
    viewMode: number;
  };
  searchParams: any;
}>();

// 组件映射
const componentMap = {
  2: SphereFace2d,
  3: SphereFace3d
};

// 计算当前应该渲染的组件
const currentViewComponent = computed(() => {
  return componentMap[props.renderParams.viewMode] || SphereFace2d; // 默认使用2D视图
});

// 监听参数变化
watch(() => props.locateSetting, (newVal) => {
  console.log('Sphere setting changed:', newVal);
  // 这里可以添加对locateSetting变化的处理逻辑
}, { deep: true });

watch(() => props.renderParams, (newVal) => {
  console.log('Render params changed:', newVal);
  // 这里可以添加对renderParams变化的处理逻辑
}, { deep: true });

watch(() => props.searchParams, (newVal) => {
  console.log('Search params changed:', newVal);
  // 这里可以添加对searchParams变化的处理逻辑
}, { deep: true });
</script>

<template>
  <div class="sphere-face-container" :style="{ width: renderParams.width + 'px', height: renderParams.height + 'px' }">
    <KeepAlive>
      <component 
        :is="currentViewComponent"
        :locate-setting="locateSetting"
        :render-params="renderParams"
        :search-params="searchParams"
      />
    </KeepAlive>
  </div>
</template>

<style scoped lang="scss">
.sphere-face-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
</style>
